import React, {PureComponent} from 'react';
import {Link} from 'dva/router';

import moment from 'moment';
import {Table, Alert, Switch, Tag, Badge, Avatar} from 'antd';
import styles from './index.less';

const statusMap = ['default', 'processing', 'success', 'error'];

class UserStandardTable extends PureComponent {
    state = {
        selectedRowKeys: [],
        totalCallNo: 0,
    };

    componentWillReceiveProps(nextProps) {
        // clean state
        if (nextProps.selectedRows.length === 0) {
            this.setState({
                selectedRowKeys: [],
                totalCallNo: 0,
            });
        }
    }

    handleRowSelectChange = (selectedRowKeys, selectedRows) => {
        const totalCallNo = selectedRows.reduce((sum, val) => {
            return sum + parseFloat(val.callNo, 10);
        }, 0);

        if (this.props.onSelectRow) {
            this.props.onSelectRow(selectedRows);
        }

        this.setState({selectedRowKeys, totalCallNo});
    }

    handleTableChange = (pagination, filters, sorter) => {
        this.props.onChange(pagination, filters, sorter);
    }

    cleanSelectedKeys = () => {
        this.handleRowSelectChange([], []);
    }

    onSwitchCheck = (checked, record) => {
        console.log(checked, record)
        this.props.handleIndexChange(checked,record)
    }

    render() {
        const {selectedRowKeys, totalCallNo} = this.state;
        const {data: {list, pagination}, loading} = this.props;

        const status = ['禁用', '正常'];

        const columns = [
            {
                title: '用户ID',
                dataIndex: 'id',
            },
            {
                title: '昵称',
                dataIndex: 'name',
            },
            {
                title: '头像',
                dataIndex: 'avatar',
                render: text => (
                    <Avatar src={text}/>
                ),
            },
            {
                title: '用户类型',
                dataIndex: 'role',
                render: (text, record) => {
                    return (
                        <Tag color="green">{record.role_label}</Tag>
                    );
                },
                filters: [{
                    text: '普通会员',
                    value: 'user',
                }, {
                    text: '零工师傅',
                    value: 'vip',
                }, {
                    text: '订单管理员',
                    value: 'order_admin',
                }],
            },
            {
                title: '积分',
                dataIndex: 'point',
                render: (text) => {
                    return (
                        <Tag color="orange">{text}</Tag>
                    );
                },
            },
            {
                title: '手机',
                dataIndex: 'phone',
            },
            {
                title: '余额',
                dataIndex: 'money',
                sorter: true,
                render: val => (
                    <p>
                        {val} 元
                    </p>
                ),
            },
            {
                title: '状态',
                dataIndex: 'status',
                filters: [
                    {
                        text: status[0],
                        value: 0,
                    },
                    {
                        text: status[1],
                        value: 1,
                    },
                ],
                render(val) {
                    return <Badge status={statusMap[val]} text={status[val]}/>;
                },
            },
            {
                title: '首页推荐',
                dataIndex: 'index',
                render: (val, record) => {
                    return (<Switch onChange={(check) => {
                        this.onSwitchCheck(check, record)
                    }} defaultChecked={val == 1} disabled={record.role != 'vip'}/>);
                },
            },
            {
                title: '注册时间',
                dataIndex: 'created_at',
                sorter: true,
                render: val => <span>{moment(val * 1000).format('YYYY-MM-DD HH:mm:ss')}</span>,
            },
            {
                title: '操作',
                dataIndex: 'action',
                render: (text, record) => (
                    <p>
                        <Link to={`/manager/${record.id}`}>用户信息</Link>
                    </p>
                ),
            },
        ];

        const paginationProps = {
            showSizeChanger: true,
            showQuickJumper: true,
            current: pagination.current,
            pageSize: pagination.size,
            total: pagination.total,
        };

        const rowSelection = {
            selectedRowKeys,
            onChange: this.handleRowSelectChange,
            getCheckboxProps: record => ({
                disabled: record.disabled,
            }),
        };

        return (
            <div className={styles.standardTable}>
                <div className={styles.tableAlert}>
                    <Alert
                        message={(
                            <p>
                                已选择 <a style={{fontWeight: 600}}>{selectedRowKeys.length}</a> 项&nbsp;&nbsp;
                                <a onClick={this.cleanSelectedKeys} style={{marginLeft: 24}}>清空</a>
                            </p>
                        )}
                        type="info"
                        showIcon
                    />
                </div>
                <Table
                    loading={loading}
                    rowKey={record => record.id}
                    rowSelection={rowSelection}
                    dataSource={list}
                    columns={columns}
                    pagination={paginationProps}
                    onChange={this.handleTableChange}
                />
            </div>
        );
    }
}

export default UserStandardTable;
